<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ style: { width: '70px' } }"
    :wrapper-col="{ style: { width: 'auto' } }"
    autocomplete="off"
    ref="refForm"
  >
    <a-form-item label="名称" name="name" :rules="[{ required: true, message: '请输入名称' }]">
      <a-input v-model:value="formState.name" placeholder="请输入名称" />
    </a-form-item>

    <a-form-item label="类型" name="type" :rules="[{ required: true, message: '请输入类型' }]">
      <a-input v-model:value="formState.type" placeholder="请输入类型，这将用来获取字典值" />
    </a-form-item>

    <a-form-item label="状态" name="status" :rules="[{ required: true, message: '请选择状态' }]">
      <a-switch v-model:checked="formState.status"></a-switch>
    </a-form-item>

    <a-form-item label="排序值" name="sort" :rules="[{ required: true, message: '请输入排序值' }]">
      <a-input-number v-model:value="formState.sort" placeholder="请输入排序值"></a-input-number>
    </a-form-item>

    <a-form-item label="描述" name="remark" :rules="[{ required: true, message: '请输入描述' }]">
      <a-textarea v-model:value="formState.remark"></a-textarea>
    </a-form-item>

    <a-form-item label="字典值" name="entries" v-if="props.showTable">
      <a-table
        class="custom-table"
        size="small"
        :pagination="{ pageSize: 5 }"
        :columns="[
          {
            title: 'label',
            dataIndex: 'label',
          },
          {
            title: 'value',
            dataIndex: 'value',
          },
          {
            title: 'actions',
            dataIndex: 'actions',
          },
        ]"
        :data-source="formState.entries"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'label'">
            <a-form-item
              :name="['entries', index, 'label']"
              :rules="{
                required: true,
                message: '',
              }"
            >
              <a-input v-model:value.trim="record.label"></a-input>
            </a-form-item>
          </template>
          <template v-if="column.dataIndex === 'value'">
            <a-form-item
              :name="['entries', index, 'value']"
              :rules="{
                required: true,
                message: '',
              }"
            >
              <a-input v-model:value.trim="record.value"></a-input>
            </a-form-item>
          </template>
          <template v-if="column.dataIndex === 'actions'">
            <template v-if="index == 0">
              <a-button style="margin: auto" type="link" size="small" @click="addEntriesItem"
                >add</a-button
              >
            </template>
            <template v-if="index > 0">
              <a-button
                style="margin: auto"
                type="link"
                danger
                size="small"
                @click="delEntriesItem(index)"
                >del</a-button
              >
            </template>
          </template>
        </template>
      </a-table>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
const props = defineProps({
  showTable: {
    type: Boolean,
    default: false,
  },
})
interface FormState {
  name: string
  type: string
  entries: { label: string; value: string }[]
  status: boolean
  sort: number
  remark: string
}

const formState = ref<FormState>({
  name: '',
  type: '',
  entries: [
    {
      label: '',
      value: '',
    },
  ],
  status: true,
  sort: 0,
  remark: '',
})

const refForm = ref()
const submit = () => {
  return refForm.value.validateFields()
}

const addEntriesItem = () => {
  const validateFields = formState.value.entries
    .map((_, index) => [
      ['entries', index, 'label'],
      ['entries', index, 'value'],
    ])
    .flat()
  refForm.value.validateFields(validateFields).then(() => {
    formState.value.entries.push({
      value: '',
      label: '',
    })
  })
}
const delEntriesItem = (index: number) => {
  formState.value.entries.splice(index, 1)
}

const clearFormState = () => {
  formState.value.entries.length = 1;
  return refForm.value.resetFields()
}

const setFormState = (record: FormState) => {
  formState.value = record
}

defineExpose({
  submit,
  clearFormState,
  setFormState,
})

defineOptions({
  name: 'DictEditForm',
})
</script>
<style scoped>
.custom-table .ant-form-item {
  margin-bottom: 0;
}
</style>
